<template>
  <div class="homeAdvantage">
	  <div class="wrapper">
		  <div class="content" v-for='item of iconImg' :key='item.id'>
			  <img :src="item.imgUrl">
			  
			  <div class="content_text">
				  <h2>{{item.title}}</h2>
				  <p>{{item.content}}</p>
			  </div>
		  </div>
	  </div>
  </div>
</template>

<script>
export default {
  name: 'homeAdvantage',
  data(){
	  return{
		  iconImg:[
			  {
				  id:'001',
				  imgUrl:require('@/assets/img/1.png'),
				  title:'价格公正',
				  content:'价格公开透明，请安心购买',
				  position:'rect(0,0.6rem,0.6rem,0)'
			  },
			  {
			      id:'002',
			      imgUrl:require('@/assets/img/2.png'),
				  title:'产品丰富',
				  content:'出行产品，全品类覆盖，一站式服务',
				  position:'rect(0,1.2rem,0.6rem,0.6rem)'
			  },
			  {
			      id:'003',
			      imgUrl:require('@/assets/img/3.png'),
				  title:'品质保证',
				  content:'精挑细选，产品优选，放心出行',
				  position:'rect(0,0.6rem,0.6rem,0px)'
			  },
			  {
			      id:'004',
			      imgUrl:require('@/assets/img/4.png'),
				  title:'专业顾问',
				  content:'24小时专业客服，一对一服务',
				  position:'rect(0,0.6rem,0.6rem,0px)'
			  }
		  ]
	  }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.homeAdvantage
	width:100%
	border-top:8px solid #e4e4e4
	padding:0.2rem 0
	.wrapper
		width:90%
		margin:0 auto
		.content
			width:100%
			margin:0.4rem 0
			position:relative
		.content>img
			position:absolute
			top:-0.1rem
			left:0
			width:1rem
			height:1rem
		.content_text
			color:#9f8a70
			margin-left:20%
			h2	
				font-size:0.30rem
				margin-bottom:0.15rem
	</style>
